<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="selectStudent font12" flex="main:justify cross:center">
                <input class="font12 title" placeholder="请输入风采标题" flex-box="1" maxlength="20" v-model="title">
                <div class="opacity5 font10 uploadNum" flex-box="0"><span v-text="title.length"></span>/20</div>
            </div>
            <div class="bottomLine"></div>
            <div class="inputModel">
                <div class="inputTitle Semibold font13">风采描述</div>
                <textarea class="titleInput" placeholder="请输入风采描述" v-model="content" maxlength="2000"></textarea>
                <div class="inputLimit"><span v-text="content.length"></span>/2000</div>
            </div>
            <div class="bottomLine"></div>
            <div class="uploadModel">
                <div class="uploadTitle Semibold font13" flex="cross:bottom">
                    <div>风采展示</div>
                    <div class="font10 uploadNum">(<span v-text="uploadList.length" :style="{color:uploadList.length>0?'#1dc6b4':''}"></span>/100)</div>
                </div>
                <ul class="uploadList">
                    <div class="uploadAdd" flex="main:center cross:center" v-if="uploadList.length<=100"
                         @click="changeFile('album')">
                        <img src="../../images/addIcon.png" class="addIcon"/>
                    </div>
                    <transition-group name="remove-item">
                        <li flex v-for="(list,index) in uploadList" :key="list">
                            <div class="picesWrap" @click="seePicesItem(index)">
                                <img :src="list.datathumbnail"/>
                                <img src="../../images/play.png" class="play" v-if="list.datatype==3"/>
                            </div>
                            <div class="inputWrap">
                                <textarea placeholder="请输入照片/视频描述" ref="imgContent"></textarea>
                                <img src="../../images/removeIcon.png" class="removeIcon"
                                     @click.stop="removeItem(index)"/>
                            </div>
                        </li>
                    </transition-group>
                </ul>
            </div>
            <div class="allSendBtn" :class="{'fullBtn':uploadList.length>=0}" flex="main:center cross:center"
                 @click="sendVideo">发送
            </div>
        </div>
        <div class="uploadWrapper" v-if="!canUploadClick"></div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    import {domain} from '../../../api/api.js'
    const api = new API();
    export default{
        data(){
            return {
                title:new Date().Format('M月d日') +' 课堂风采',
                content: '',
                uploadList: [],
                classId: this.$route.query.classId ? this.$route.query.classId : '',
                domain: domain,
                imgKeys: [],
                canUploadClick: true,
                titleCheck:/[\ud800-\udbff][\udc00-\udfff]/
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
            this.$nextTick(function () {
                setTimeout(()=>{
                    this.propsTitle();
                },300);
                document.documentElement.scrollTop=1;
                document.body.scrollTop=1;
            })
        },
        methods: {
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '发布风采',
                }, (res) => {
                })
            },
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, ()=> {})
            },
            seePicesItem(index){
                this.$util.JsBridge('seePicesItem', {
                    picItemIndex: this.uploadList.length - 1 - index
                }, (res) => {
                })
            },
            removeItem(index){
                this.$delete(this.uploadList, index)
                this.$util.JsBridge('removePicesItem', {
                    picItemIndex: this.imgKeys.length - 1 - index
                }, (res) => {
                });
                this.imgKeys.splice(this.imgKeys.length - 1 - index, 1)
            },
            changeFile(type){
                if (100 - this.uploadList.length > 0) {
                    this.$util.JsBridge('getPicesList', {
                        picItemCount: 100 - this.uploadList.length,
                        showType: type,
                        appType: 'APP_VIDEO'
                    }, (res) => {
                        this.changeFileCallBack(res);
                    })
                } else {
                    this.$toast('您最多只能上传100个附件');
                }
            },
            changeFileCallBack(res){
                this.imgKeys = this.imgKeys.concat(res);
                for (let i = 0; i < res.length; i++) {
                    this.getImgInfo(res[i])
                }
            },
            getImgInfo(rs){
                this.$util.JsBridge('getImgInfo', {
                    fileKey: rs
                }, (res) => {
                    if (res.datathumbnail.indexOf('data:image/png;base64') == -1) {
                        res.datathumbnail = 'data:image/png;base64,' + res.datathumbnail;
                    }
                    this.uploadList.unshift(res);
                })
            },
            check(){
                if (this.title==='') {
                    this.$toast('请输入风采标题');
                    return false
                }else if(this.titleCheck.test(this.title)){
                    this.$toast('标题内容不能包含表情');
                    return false;
                }else if (this.content==='') {
                    this.$toast('请输入风采内容');
                    return false
                }else if (this.uploadList.length == 0) {
                    this.$toast('请上传风采附件');
                    return false
                }
                return true
            },
            sendVideo(){
                if (this.check()) {
                    if (this.canUploadClick) {
                        this.canUploadClick = false;
                        let picContents = [];
                        this.imgKeys.map((e, index) => {
                            let obj = {};
                            obj.imgUrl = e;
                            obj.type = JSON.parse(JSON.stringify(this.uploadList)).reverse()[index].datatype;
                            if (obj.type == 3) {
                                obj.time = JSON.parse(JSON.stringify(this.uploadList)).reverse()[index].datatime;
                            }
                            if(this.$refs.imgContent[index].value==''){
                                obj.content=''
                            }else{
                                obj.content=this.$util.utf16toEntities(this.$refs.imgContent[index].value).replace(/\n|\r\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
                            }
                            picContents.push(obj)
                        })
                        const content = this.$util.utf16toEntities(this.content).replace(/\n|\r\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
                        const params = {
                            title: this.title,
                            content: content,
                            classId: this.classId,
                            picContents: JSON.stringify(picContents)
                        }
                        let response = api.sendVideo(params);
                        response.then((res) => {
                            if (res.code === 200) {
                                this.$util.JsBridge('sendFinish', {
                                    taskTid: res.rs.taskTid,
                                    content: this.content,
                                    appType: 'APP_VEDIO',
                                    taskName: '课堂风采',
                                    taskImageURL: this.domain + 'www/static/images/app_icon_v200/ketangfengcai-3x.png'
                                }, () => {})
                            } else {
                                this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/add',api:'sendVideo',success:false,data:res}));
                                this.canUploadClick = true;
                            }
                        }).catch((e) => {
                            this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/add',api:'sendVideo',success:false,data:'网络异常'}));
                            this.canUploadClick = true;
                        })
                    } else {
                        this.$toast('上传中,请稍后');
                    }
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    .container {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
    }

    .selectStudent {
        input {
            height: 100%;
            background: transparent;
            color: #fff;
        }
        padding: 0.28rem 0.12rem 0.1rem 0.12rem;
    }

    .bottomLine {
        background: rgba(255,255,255,0.2);
        width: 3.5rem;
        height: 0.5px;
        margin: 0 auto;
    }

    .inputModel {
        height: 1.7rem;
        width: 100%;
    }

    .inputTitle {
        padding: 0.12rem 0 0.12rem 0.12rem;
    }

    .inputLimit {
        opacity: 0.4;
        font-size: 0.1rem;
        text-align: right;
        margin-right: 0.12rem;
    }

    .titleInput {
        width: 100%;
        padding: 0 0.12rem;
        background: transparent;
        font-size: 0.13rem;
        color: #ffffff;
        height: 1rem;
    }

    .uploadTitle {
        padding: 0.17rem 0 0.12rem 0;
    }

    .uploadAdd {
        border: 1px dashed #ccd2da;
        width: 0.81rem;
        height: 0.81rem;
    }

    .uploadModel {
        padding: 0 0.12rem 0.88rem 0.12rem;
    }

    .addIcon {
        width: 0.23rem;
        height: 0.23rem;
    }
    .picesWrap {
        background: #d8d8d8;
        position: relative;
        width: 0.81rem;
        height: 0.81rem;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            -o-object-fit: cover;
        }
    }

    .uploadList {
        li {
            margin-top: 0.08rem;
        }
    }

    .inputWrap {
        width: 2.7rem;
        height: 0.81rem;
        position: relative;
        background: rgba(250, 251, 255, .1);
        textArea {
            width: calc(100% - 0.24rem);
            height: 100%;
            background: transparent;
            padding: 0.08rem 0 0 0.08rem;
            font-size: 0.12rem;
            color: #fff;
        }
    }

    .removeIcon {
        width: 0.12rem;
        position: absolute;
        right: 0.08rem;
        top: 0.08rem;
    }

    .uploadNum {
        opacity: 0.4;
        margin-left: 0.08rem;
    }

    .remove-item-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .remove-item-enter, .remove-item-leave-to {
        transform: translateX(-3.5rem);
        opacity: 0;
    }
</style>
